
<template>
<div id="viewuser">   

      
     <!--这是分配学生的弹出框-->
<el-dialog
         width="80%"
        :visible.sync="updateTag2"
        :close-on-click-modal="false" top="50px">

 <template >
    
    <el-transfer

    filterable
    filter-placeholder="请输入学生姓名"
      :titles="['未寄宿学生', '该宿舍居住的学生']"
      :button-texts="['取消寄宿', '寄宿']"  
     @change="selectChange"

       v-model="value"      
      :data="data"
      :props="{
      key: 'id',
      label: 'realName',
      
      }">   
    </el-transfer>
  
  
</template>


        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveover()">保存分配</el-button>          
        </span>
  </el-dialog>
  




    <!--这是修改的弹出框-->
<el-dialog
        title="请填写修改的信息"
        :visible.sync="updateTag1"
        :close-on-click-modal="false" top="50px">

        <el-form 
        >
        
          <el-form-item label="宿舍名称"  >
                <el-input v-model="room.roomname" autocomplete="off"></el-input>
            </el-form-item>
                
            <el-form-item label="居住学生性别">
                <el-radio-group v-model="room.roomsex">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>     

            
          

            <el-form-item label="宿舍是否启用">
                <el-radio-group v-model="room.roomstatus">
                    <el-radio label="启用">启用</el-radio>
                    <el-radio label="禁用">禁用</el-radio>
                </el-radio-group>
            </el-form-item>   

 <el-form-item label="宿舍管理者姓名">
            <el-select v-model="room.roommanagerid"  >
      
    <el-option
      v-for="item in Managers"
      :key="item.id"
      :label="item.realName"
      :value="item.id">
      
    </el-option>
  </el-select>
 </el-form-item>
              
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="no()">取 消</el-button>
            <el-button type="primary" @click="change1()">确 定</el-button>
        </span>
        </el-dialog>





     
<el-dialog title="该宿舍的学生集合" :visible.sync="selectStudents">
  <el-table :data="Students"     :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"  :cell-style="rowstyle">
    
     <el-table-column
      label="头像"
      width="100"
      align="center">
      <template slot-scope="scope">
      
         <el-image
      style="width: 70px; height: 70px"
      :src="$imgHost+scope.row.img"
      fit="fill">
      </el-image>

      </template>

    </el-table-column>
   
    <el-table-column property="realName" label="学生姓名" width="200"></el-table-column>
    <el-table-column property="sex" label="性别" width="200"></el-table-column>
    <el-table-column property="studentPhone" label="联系电话"></el-table-column>
   

  </el-table>
  
</el-dialog>


    <el-button-group style="margin-left:90px;">
      请选择宿舍居住的学生性别：
    <el-select v-model="roomSex"  
     @change="shearchstate"   style="margin-bottom:20px;">
      
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      
    </el-option>
  </el-select>
   </el-button-group>
  <el-table
    :data="pagination.list"
    border
     :cell-style="rowstyle"
    :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"
    style="width: 1420px;margin-left:90px;">

 <el-table-column
     
      label="所在楼栋名称"
      width="120">
     <template slot-scope="scope">
               <el-button type="warning">{{scope.row.storeyName}}</el-button> 
      </template>

    </el-table-column>

    <el-table-column
    
      label="所在宿舍名称"
      width="150">
      <template slot-scope="scope">
               <el-button type="success">{{scope.row.roomName}}</el-button> 
      </template>

    </el-table-column>




    <el-table-column
   
      label="宿舍居住学生性别"
      width="160">
      <template slot-scope="scope">
         <el-button type="danger" plain>{{scope.row.roomSex}}</el-button>
              
      </template>
    </el-table-column>

    
 

    <el-table-column
      
      label="宿舍总床位"
      width="120">
     <template slot-scope="scope">
        <el-button type="primary"  circle>{{scope.row.roomNumber}}</el-button>
              
      </template>
    </el-table-column>
    

    <el-table-column
      prop="roomResidue"
      label="宿舍空余床位"
      width="120">
      
    </el-table-column>

    <el-table-column
      prop="realName"
      label="宿舍宿管名字"
      width="120">
    </el-table-column>

     <el-table-column
      prop="roomStatus"
      label="宿舍是否启用"
      width="120">
    </el-table-column>
 
    <el-table-column
     
      label="操作"
      width="500"
     align="center">
      <template slot-scope="scope">
         <el-button type="primary"  icon="el-icon-search" @click="selectStudent(scope.row)">查看居住学生列表</el-button>
        <el-button type="primary"   icon="el-icon-edit"  @click="change(scope.row)" >分配学生居住</el-button>
        <el-button type="primary"   @click="update(scope.row)">修改宿舍信息</el-button>
      </template>
    </el-table-column>
  </el-table>
   <!--分页-->
     <el-pagination
      style="margin-left:80px;margin-top:50px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange "
      :current-page="pagination.pageNum"
      :page-sizes="[1,2,3,4,5,6,7]"
      :page-size="pagination.pageSize "
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>
        
</div>
</template>
<script>
  export default {
    data() {
      return {

        //宿管集合
        Managers:[],

        //data属性用来绑定总数据来源
        data: [],

        //value属性是选中项 key的数组，当数据项被移动到右侧时，其key值被加入value数组中。
        value: [],


      roomId:'',
     //修改的弹框
     updateTag1:false,
     //分配的
     updateTag2:false,
       
      //宿舍对象
      room:{},

      //学生弹框
      selectStudents:false,
       //学生集合
       Students:[],

       //分页对象
       pagination:{},
       //搜索条件：宿舍居住的学生性别
       roomSex:'男',
         //下拉框绑定值
          options:[

           {
             value:'男',
            label:'男'
           },
           {
             value:'女',
            label:'女'
           },
           
          ],
       
      };
    },
    methods: {

//改变穿梭框
 selectChange(value) {

      console.log(value);

    }
,

      //关闭分配
      saveover(){

             //将 选中的学生 id数组遍历 添加住宿信息
             var url="/room/addRoomForStudents" ;
             var params=new URLSearchParams();                  
             params.append("roomId",this.roomId);
              params.append("ids",this.value);
             this.$axios.post(url,params).then(resp=>{
                 
                  this.updateTag2  = false;
           this.$message({message:'结束分配'
                      ,duration:2000
                      ,offset:160                                               
                      ,showClose: true
                     ,type:'success'});


         //清空数据
         this.data=[];
         this.value=[];

                 this.find();
             });

           
      },

    //点击分配
    change(row){
      	    this.roomId  = row.roomId;
            var url="/room/checkRoomForStudents" ;
            var params=new URLSearchParams();                  
             params.append("roomId",row.roomId);
             this.$axios.post(url,params).then(resp=>{
               
                console.log(resp.data);
                if(resp.data.tag){
                  //打开分配弹窗
                  this.updateTag2 = true; 
                   this.$message({message: resp.data.message
                                                ,duration:2000
                                                ,offset:10
                                                
                                                ,showClose: true
                                                ,type:'success'})
                   //获取该宿舍寄宿的学生集合
                     var url="/room/findRoomStudents" ;
                      var params=new URLSearchParams();
                   
                    params.append("roomId",row.roomId);
                    this.$axios.post(url,params).then(resp=>{                    
                    this.data  = resp.data.data;                    
                    for (let index = 0; index < resp.data.data.length; index++) {                           
                            this.value.push(resp.data.data[index].id);
                    }
                    })

                    //获取全部未寄宿的学生(与该宿舍性别一致)
                     var url="/room/checkRoomsex" ;
                    var params=new URLSearchParams();                  
                    params.append("roomId",row.roomId);
                    this.$axios.post(url,params).then(resp=>{

                      for (let index = 0; index < resp.data.data.length; index++) {                           
                             this.data.push(resp.data.data[index]);
                    }
                       

                        
             })


                    
            
                }else{
                   this.$message({message: resp.data.message
                                                ,duration:2000
                                                ,offset:150
                                                ,showClose: true
                                                ,type:'error'});

                }
          })


    },


    //点击修改
      update(row){

        this.updateTag1 =true;
         var url="/room/Room" ;
            var params=new URLSearchParams();
                   
             params.append("roomId",row.roomId);
             this.$axios.post(url,params).then(resp=>{
             
              this.room   = resp.data.data;
          })

    
      },
      //取消修改
      no(){
      this.updateTag1 = false;
                this.find();
      },
       
       //确认修改
       change1(){
             var url="/room/changeRoom" ;
              var params=new URLSearchParams();
                   
             params.append("roomId",this.room.roomid);
             params.append("roomName",this.room.roomname);
             params.append("roomSex",this.room.roomsex);
             params.append("roomStatus",this.room.roomstatus);
            
              params.append("roommanagerid",this.room.roommanagerid);

             this.$axios.post(url,params).then(resp=>{

               console.log(resp.data);
               this.updateTag1 = false;
               this.find();

              if(resp.data.tag){
 //提示修改成功
                        this.$message({message:'修改成功。'
                                                ,duration:5000
                                                ,offset:150
                                                ,showClose: true
                                                ,type:'success'});

              }else{
 //提示修改失败
                        this.$message({message: resp.data.message
                                                ,duration:5000
                                                ,offset:150
                                                ,showClose: true
                                                ,type:'warning'});

              }

               
             });
             
              
        
       
       },


      //查看学生列表
      selectStudent(row){

            this.selectStudents  =true;

             var url="/room/findRoomStudents" ;
            var params=new URLSearchParams();
                   
             params.append("roomId",row.roomId);
             this.$axios.post(url,params).then(resp=>{
             
               this.Students=resp.data.data;
          })

      },



      //分页查询
      find(pageNum=1,pageSize=6){
        
           var url="/room/findRoom" ;
           var params=new URLSearchParams();
             params.append("pageNum",pageNum);
             params.append("pageSize",pageSize);         
             params.append("roomSex",this.roomSex);
             this.$axios.post(url,params).then(resp=>{
             
               this.pagination=resp.data;
                console.log(resp.data);
               console.log("天助我也");
          })
   },

   
        //pageSize 改变时会触发回调参数每页行数
      handleSizeChange(pageSize){
          this.find(this.pagination.pageNum,pageSize)

      },
      //currentPage 改变时会触发 回调参数当前页
      handleCurrentChange(pageNum){
        this.find(pageNum,this.pagination.pageSize)
      },


//选择宿舍学生居住的性别时
    shearchstate(value){
     this.roomSex=value;
     this.find();
     this.value = [];
     this.data =[];
   },
     
     // 行内数据居中
     rowstyle(){
        return "text-align: center" ;  }       
  ,

  findManager(){
            var url="/room/findManagers" ;
             var params=new URLSearchParams();
          
             this.$axios.post(url,params).then(resp=>{
             
               this.Managers=resp.data.data;
               console.log(this.Managers);
          })
  }
  
    },


     mounted() {
        this.find();
        this.findManager();
    },
  };
</script>

<style scope>

.el-transfer-panel__list.is-filterable{
  height:500px ;
}

.el-transfer-panel{
   width: 550px;
   margin-left: 50px;
   height: 600px;
}

  #viewuser{
     margin-left: 50px;
    margin-top: 50px;
  }

   #button{
    position: absolute;
    left:1450px;
    top:200px;
   
  }
</style>

